<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2023-12-23 11:36:56
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2024-01-03 21:07:08
 * @FilePath: \ele-h5\src\views\search\searchView.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import OpSearch from '@/components/OpSearch.vue'
import { fetchSearchData } from '@/api/search'
import type { IsearchResult } from '@/types'
import { useToggle } from '@/use/useToggle'
import { useDebounce } from '@/use/useDebounce'
import { ref, computed, watch } from 'vue'

interface IEmits {
  (e: 'cancel'): void
}

const HISTOTY_LIST = [
  '比萨',
  '栗子',
  '切果NOW',
  '炒饭',
  '出前一丁',
  '玉米',
  '牛腩',
  '土豆焗饭',
  '烧烤',
  '水果'
]

const [isHistoryTagShow, taggleHistoryTag] = useToggle(false)

const historyTagList = computed(() =>
  isHistoryTagShow.value ? HISTOTY_LIST : HISTOTY_LIST.slice(0, 5)
)

const tagClick = (item: string) => {
  searchValue.value = item
  onSearch(item)
}

const searchValue = ref('')
const debounceValue = useDebounce(searchValue, 1000)

watch(debounceValue, (newValue) => {
  if (!newValue) {
    searchResult.value = []
    return
  }
  onSearch(newValue as string)
})

const [INIT, DONE, DOING] = [-1, 0, 1]

// 这种情况下也可以直接用断言
// const searchResult = ref([] as IsearchResult[])
const searchResult = ref<IsearchResult[]>([])

const searchStatus = ref(INIT)

const onSearch = async (content?: string | number) => {
  try {
    searchStatus.value = DOING
    const { list } = await fetchSearchData(content as string)
    searchResult.value = list
  } finally {
    searchStatus.value = DONE
  }
}

const onCancel = () => {
  emits('cancel')
  searchStatus.value = INIT
}

const emits = defineEmits<IEmits>()
</script>

<template>
  <div class="search-view">
    <OpSearch
      show-action
      v-model="searchValue"
      shape="round"
      placeholder="请输入搜索条件"
      @search="onSearch"
      @cancel="onCancel"
    ></OpSearch>
    <div v-if="!searchValue" class="search-view__history">
      <div class="label">历史搜索</div>
      <TransitionGroup name="list">
        <div @click="tagClick(item)" class="history-tag" v-for="item in historyTagList" :key="item">
          {{ item }}
        </div>
        <div key="icon" @click="taggleHistoryTag" class="history-tag">
          <VanIcon v-if="isHistoryTagShow" name="arrow-up"></VanIcon>
          <VanIcon v-else name="arrow-down"></VanIcon>
        </div>
      </TransitionGroup>
    </div>
    <div v-else class="search-view__result">
      <div v-if="searchStatus === DOING">~正在搜索~</div>
      <template v-if="searchStatus === DONE">
        <div class="result-item" v-for="item in searchResult" :key="item.label">
          <VanIcon name="search"></VanIcon>
          <div class="name">{{ item.label }}</div>
          <div class="count">约{{ item.resultCount }}个结果</div>
        </div>
        <div v-if="searchResult.length === 0" class="no-result">~暂无推荐~</div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.search-view {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 999;

  &__history {
    padding: var(--van-padding-sm);
    .label {
      margin-bottom: var(--van-padding-xs);
    }
    .history-tag {
      display: inline-block;
      font-size: 12px;
      border-radius: 10px;
      color: var(--van-gray-6);
      background: var(--van-gray-1);
      padding: 4px 8px;
      margin-right: 10px;
      margin-bottom: var(--van-padding-xs);
    }
  }

  &__result {
    .result-item {
      display: flex;
      align-items: center;
      font-size: 12px;
      padding: 10px;
      border-radius: 1px solid var(--van-gray-1);
      .name {
        flex: 1;
        padding-left: 6px;
      }
      .count {
        font-size: 12px;
        color: var(--van-gray-6);
      }
    }
    .no-result,
    .searching {
      font-size: 12px;
      padding: 100px 0;
      text-align: center;
      color: var(--van-gray-6);
    }
  }
}

.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
